<template>
	<view class="main-view">
		<view class="page-title">
			导航测试
		</view>
		<view class="page-item-title">
			grid布局
		</view>
		<view class="page-article grid-wrapper">
			
			<view class="grid-item">
				1
			</view>
			<view class="grid-item">
				2
			</view>
			<view class="grid-item">
				3
			</view>
			<view class="grid-item">
				4
			</view>
			<view class="grid-item">
				5
			</view>
			<view class="grid-item">
				6
			</view>
			<view class="grid-item">
				7
			</view>
			<view class="grid-item">
				8
			</view>
			<view class="grid-item">
				9
			</view>
		</view>
		<view class="page-item-title">
			navigator
		</view>
		<view class="navigator-wrapper">
			<view class="navigator-item">
				<navigator url="../form_demo/form_demo">表单页面</navigator>
			</view>
			<view class="navigator-item">
				<navigator url="../views/views_demo">view控件</navigator>
			</view>
			<view class="navigator-item">
				<navigator url="../index/index">首页</navigator>
			</view>
		</view>
		<view class="navigator-wrapper">
			<view class="navigator-item">
				<navigator url="../tab_bars/tab_bars">tab_bars页面</navigator>
			</view>
			<view class="navigator-item">
				<navigator url="../views/views_demo">view控件</navigator>
			</view>
			<view class="navigator-item">
				<navigator url="../index/index">首页</navigator>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	.main-view {
		padding: 0 5%;
		.page-title  {
			text-align: center;
			font-weight: 700;
			font-family: 'Malgun Gothic';
		}
		
		.page-item-title{
			font-weight: bold;
			text-align: center;
			color: #007AFF;
			font-size: 1.2rem;
		}
		.page-article{
			width: calc(100%-10%);
			// height: 500upx;
			background-color: lightgreen;
		}
		.grid-wrapper{
			display:grid;
			grid-template-columns: 1fr 2fr 1fr;
			grid-template-rows: 100px 100px 100px;
			grid-column-gap: 10upx;
			grid-row-gap: 10upx;
			.grid-item {
				// width: 100upx;
				// height: 100upx;
				background-color: lightblue;
			}
		}
		.navigator-wrapper{
			
		}
	
	}
	
	
</style>
